﻿<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>爱购商城--商品搜索结果页</title>
    <link rel="icon" href="assets/img/favicon.ico">
    <link href='./css/material.css' rel="stylesheet">
    <link href="./css/vuetify.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./elementui/index.css">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/qs.js"></script>
    <script src="./elementui/index.js"></script>
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
    <style type="text/css">
* {
    box-sizing: unset;
}
        .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-family: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
            margin-right: 10px;
        }
/*        .logo-list li{
            padding:8px;
        }
       .logo-list li:hover{
            background-color: #f3f3f3;
        }*/
        .type-list a:hover{
            color: #1299ec;
        }
        .skus {
            list-style: none;
        }
        .skus li{
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }
        .skus li.selected{
            border: 2px solid #dd1144;
        }
        .skus img{
            width: 25px;
            height: 25px;
        }
        .select-filter{
            background-color: #00b0ff;
            border:1px #9d261d solid;
        }
    </style>
    <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body >

<div id="searchApp">
<div id="nav-bottom">
    <ly-top/>
</div>


<!--list-content-->
<div class="main" >
    <div class="py-container">

        <div class="bread">
            <!--面包屑-->
            <ul class="fl sui-breadcrumb">
                <li><span>全部结果:</span></li>
                <li ><a href="#">手机</a></li>
                <li ><span>手机通讯</span></li>
            </ul>
            <!--已选择过滤项-->
            <ul class="tags-choose">
                <li class="tag">
                    品牌:<span style="color: red">apple</span>
                    <i class="sui-icon icon-tb-close"></i>
                </li>
                <li class="tag">
                    内存:<span style="color: red">4G</span>
                    <i class="sui-icon icon-tb-close"></i>
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <!--selector-->
        <div class="clearfix selector">
            <div class="type-wrap" v-for="(filter,i) in filters" :key="i" v-if="filter.key != '品牌'"
                 v-show="i < 5 || showMore">
                <div class="fl key">{{filter.key}}</div>
                <div class="fl value">
                    <ul class="type-list">
                        <li :class="setSelected(filter.key,option.name)"
                                v-for="option in filter.options" @click="selectFilter(filter.key,option)">
                            <a>{{option.name}}</a>
                        </li>
                    </ul>
                </div>
                <div class="fl ext"></div>
            </div>
            <div v-else class="type-wrap logo" >
                <div class="fl key brand">{{filter.key}}</div>
                <div class="value logos">
                    <ul class="logo-list">
                        <li :class="setSelected(filter.key,option.name)"
                                v-for="option in filter.options" @click="selectFilter(filter.key,option)">
                            <img :src="option.image" v-if="option.image.length > 0" />
                            <a v-else>{{option.name}}</a>
                        </li>
                    </ul>
                </div>
                <div class="fl ext">
                    <a href="javascript:void(0);" class="sui-btn">多选</a>
                </div>
            </div>
            <div class="type-wrap" style="text-align: center">
                <v-btn small flat @click="showMore = true">
                    更多<v-icon>arrow_drop_down</v-icon>
                </v-btn>
                <v-btn small="" flat @click="showMore = false">
                    收起<v-icon>arrow_drop_up</v-icon>
                </v-btn>
            </div>
        </div>
        <!--details-->
        <div class="details">
            <div class="sui-navbar">
                <div class="navbar-inner filter">
                    <ul class="sui-nav">
                        <li class="active">
                            <a href="#">综合</a>
                        </li>
                        <li>
                            <a href="#">销量</a>
                        </li>
                        <li>
                            <a href="#">新品</a>
                        </li>
                        <li>
                            <a href="#">评价</a>
                        </li>
                        <li>
                            <a href="#">价格</a>
                        </li>
                    </ul>
                    <div class="top-pagination">
                        <span>共 <i style="color: #222;">7600+</i> 商品</span>
                        <span><i style="color: red;">2</i>/123</span>
                        <a class="btn-arrow" href="#" style="display: inline-block">&lt;</a>
                        <a class="btn-arrow" href="#" style="display: inline-block">&gt;</a>
                    </div>
                </div>
            </div>
            <div class="goods-list">
                <ul class="yui3-g">
                    <li class="yui3-u-1-5" v-for="goods in goodsList">
                        <div class="list-wrap">
                            <div class="p-img">
                                <a :href="'http://www.eshop.com/goods-details/'+goods.id+'.html'" target="_blank">
                                    <img :src="goods.selected.image" height="200"/>
                                </a>
                                <ul class="skus">
                                    <li :class="goods.selected == sku?'selected':''" v-for="sku in goods.skus"
                                        @mouseenter="selectSku(goods,sku)">
                                        <img :src="sku.image">
                                    </li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>{{Math.floor(goods.selected.price/100)+ '.00'}}</i>
                                </strong>
                            </div>
                            <div class="attr" :title="goods.selected.title">
                                <em>{{goods.selected.title.length > 20 ?
                                    goods.selected.title.substring(0,20) + '..':
                                    goods.selected.title}}</em>
                            </div>
                            <div class="cu">
                                <em><span>促</span>满一件可参加超值换购</em>
                            </div>
                            <div class="commit">
                                <i class="command">已有2000人评价</i>
                            </div>
                            <div class="operate">
                                <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div style="text-align: center">
                <el-pagination
                        @current-change="searchGoods"
                        @size-change="pageSizeChange"
                        :current-page="search.current"
                        :page-size="search.pageSize"
                        :page-sizes="[20, 40, 80, 100]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <!--hotsale-->
        <div class="clearfix hot-sale">
            <h4 class="title">热卖商品</h4>
            <div class="hot-list">
                <ul class="yui3-g">
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_01.png"/>
                            </div>
                            <div class="attr">
                                <em>Apple苹果iPhone 6s (A1699)</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_03.png"/>
                            </div>
                            <div class="attr">
                                <em>金属A面，360°翻转，APP下单省300！</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_04.png"/>
                            </div>
                            <div class="attr">
                                <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4068.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有20人评价</i>
                            </div>
                        </div>
                    </li>
                    <li class="yui3-u-1-4">
                        <div class="list-wrap">
                            <div class="p-img">
                                <img src="img/like_02.png"/>
                            </div>
                            <div class="attr">
                                <em>Apple苹果iPhone 6s (A1699)</em>
                            </div>
                            <div class="price">
                                <strong>
                                    <em>¥</em>
                                    <i>4088.00</i>
                                </strong>
                            </div>
                            <div class="commit">
                                <i class="command">已有700人评价</i>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#searchApp",
        data: {
            search:{ //搜索参数
                keyword:"", //关键字
                current:1,
                pageSize:20,
                specs:{} //用户选择的过滤条件
            },
            filters:[], // 显示过滤选项的列表 {key:xx,options:[xxx,xxx]}
            total:0,
            goodsList:[], //商品列表
            showMore:false //显示更多
        },
        components:{
            lyTop: () => import("./js/pages/top.js")
        },
        methods:{
            //获得地址中的参数值
            getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) {
                    return decodeURI(r[2]);
                }
                return null;
            },
            //选择商品图片
            selectSku(goods,sku){
                goods.selected = sku;
                console.log(goods);
            },
            //点击过滤条件
            selectFilter(k,v){
                //分类和品牌传递的是id
                if(k == "分类" || k == "品牌"){
                    //如果之前的值就是当前赋值的值，就将数据设置为空（取消选中）
                    this.search.specs[k] = this.search.specs[k] == v.id ? undefined : v.id;
                }else{
                    this.search.specs[k] = this.search.specs[k] == v.name ? undefined : v.name;
                }
                console.log(JSON.stringify(this.search.specs));
                //再次进行搜索
                this.searchGoods(this.search.current,true);
            },
            //给筛选值设置选中样式
            setSelected(k,v){
              return this.search.specs[k] == v ? 'select-filter' : '';
            },
            //搜索商品 current当前页 selectFilter 是否选择过滤条件
            searchGoods(current,selectFilter){
                this.search.current = current;
                axios.post("http://api.eshop.com/search",this.search)
                    .then(value => {
                        //先处理数据
                        value.data.records.forEach(goods => {
                            //将字符串解析为JSON数组
                            goods.skus = JSON.parse(goods.skus);
                            //添加选中商品的属性 默认是第一个
                            goods.selected = goods.skus[0];
                        });
                        //再绑定商品列表
                        this.goodsList = value.data.records;
                        this.total = value.data.total;
                        //不是点击过滤条件，就加载过滤条件
                        if(!selectFilter){
                            this.filters = [];
                            //处理过滤的规格参数
                            this.filters.push({key:"分类",options: value.data.categories});
                            this.filters.push({key:"品牌",options: value.data.brands});
                            //处理搜索规格 options:[{name:xxx},{..}]
                            value.data.specs.forEach(spec => {
                                let options = [];
                                //[xxxx,xxxx] => [{name:xxx},{..}]
                                spec.options.forEach(val => {
                                    options.push({name:val});
                                });
                                spec.options = options;
                                this.filters.push(spec);
                            });
                        }
                        console.log(this.goodsList);
                    });
            },
            pageSizeChange(size){
                this.search.pageSize = size;
                this.searchGoods(this.search.current);
            }
        },
        mounted(){
            //获得地址栏中的key参数
            this.search.keyword = this.getUrlParam("key");
            console.log(this.search.keyword);
            this.searchGoods(1,false);
        }
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body >
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4}</div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>


</html>